<script setup lang="ts">
import StPage from "@/components/st-page/StPage.vue";
import StNavbar from "@/components/st-navbar/StNavbar.vue";
import Waves from "@/components/st-wave/StWave.vue";
import type {WaveListItemType} from "@/components/st-wave/types/wave-list-item";
import GenWaveList from '@/components/st-wave/utils/gen-wave-list'
import type {TitleListItemType} from "@/pages/login-register/types/title-list-item";
import LrTitle from "@/pages/login-register/components/lr-title/LrTitle.vue";
import {ref} from 'vue'

// 波浪列表
const waveHeight = '250rpx'
const waveList: WaveListItemType[] = GenWaveList({
  num: 3,
  h: waveHeight
})

// 标题数据列表
const titleList = ref<TitleListItemType[]>([
  {title: '登录', subTitle: 'Welcome back', appearCnt: 1},
  {title: '注册', subTitle: 'Welcome back', appearCnt: 0},
])
// 当前展示的标题项索引
const titleShowedIdx = ref(0)
const f = () => {
  titleShowedIdx.value = titleShowedIdx.value === 0 ? 1 : 0
}
</script>

<template>
  <!-- 登录注册页面 -->
  <view class="login-register-page">
    <StPage>
      <!-- 顶部导航栏 -->
      <StNavbar>
        <!-- 导航栏右部 -->
        <template #right>
          <view class="navbar-right" @click="f">
            <text>注册</text>
          </view>
        </template>
      </StNavbar>
      <!-- 波浪 -->
      <Waves :wave-list="waveList" height="420rpx">
        <!-- 波浪组件的内容区域 -->
        <view class="wave-content">
          <!-- 标题盒子 -->
          <view class="title-box" v-for="(item, idx) in titleList" :key="idx">
            <!-- v-show="idx === titleShowedIdx" -->
            <LrTitle v-if="idx === titleShowedIdx || item.appearCnt > 0" :is-hidden="idx !== titleShowedIdx" :title-item="item"></LrTitle>
          </view>
        </view>
      </Waves>
    </StPage>
  </view>
</template>

<style scoped lang="scss">
// 登录注册页面
.login-register-page {
  width: 100%;
  min-height: 100vh;
  background-color: #54C5FF;

  // 顶部导航栏右部
  .navbar-right {
    padding: 10rpx;
    color: #fff;
  }

  // 波浪组件的内容区域
  .wave-content {
    position: relative;
    width: 100%;
    height: 100%;

    // 标题盒子
    .title-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
